<template>
    <div class="d-flex jc-center title_wrap">
        <img src="../../../assets/img/bi/logo.png" alt="" class="logo">
        <div class="d-flex jc-center">
            <div class="title">
                <span class="title-text fm"
                    :class="{ 'set-size': companyName?.length >= 16, 'set-size2': companyName?.length >= 24, 'set-size3': companyName?.length >= 26, 'set-size4': companyName?.length >= 28, 'set-size5': companyName?.length >= 30 }">{{
                        companyName }}</span>
            </div>
        </div>
        <div class="timers flex flex-ai-c">
            <span class="fs-14">{{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}</span>
            <div class="button mg-l-10 pointer" @click="handleButtonClick">
                <span class="t1 fs-12">{{ buttonName }}</span>
            </div>
            <!-- <div class="setting_icon"   @click="setSettingShow(true)">
          <img src="@/assets/img/headers/setting.png" alt="设置">
      </div> -->
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, computed } from "vue";
import dayjs from 'dayjs';
import store from '@/store'

const companyName = computed(() => {
    return store.state.companyName
})

const props = defineProps({
    buttonName: {
        type: String,
        default: '退出全屏'
    }
})

const dateData = reactive({
    dateDay: "",
    dateYear: "",
    dateWeek: "",
    timing: null as any
});
const emits = defineEmits(['click'])

const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
const timeFn = () => {
    dateData.timing = setInterval(() => {
        dateData.dateYear = dayjs().format("YYYY-MM-DD")
        dateData.dateDay = dayjs().format("HH : mm : ss");
        dateData.dateWeek = weekday[dayjs().day()];
    }, 1000);
};
timeFn()

const handleButtonClick = () => {
    emits('click')
}
</script>
<style scoped lang="stylus">
.title_wrap {
    height: 124px;
    background-image: url("../../../assets/img/bi/header.png");
    background-size: 100% 100%;
    background-position: center center;
    position: relative;
    margin-bottom: 4px;
    .zuojuxing {
        left: 11%;
    }

    .youjuxing {
        right: 11%;
        transform: rotate(180deg);
    }

    .timers {
        position: absolute;
        right: 80px;
        top: 40px;
        font-size: 16px;
        display: flex;
        align-items: center;
        color: #fff;
        .setting_icon {
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-left: 12px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.title {
    position: relative;
    // width: 500px;
    text-align: center;
    background-size: cover;
    color: transparent;
    line-height: 80px;

    .title-text {
        font-size: 46px;
        font-weight: 900;
        width: 100%;
        background: linear-gradient(180deg, #FFFFFF 25%, #E3FEFF 59%, #9AFCFF 78%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.logo {
    position absolute
    width 156px
    height 36px
    left 110px
    top 40px
}
.button {
    width 84px
    height 32px
    line-height 32px
    text-align center
    background url('../../../assets/img/bi/icon-button.png') no-repeat
    background-size 100% 100%
}
.t1 {
    background linear-gradient(180deg, #FFFFFF 20%, #40C5F1 77%)
    -webkit-background-clip text
    -webkit-text-fill-color transparent
    background-clip text
    text-fill-color transparent
}
.fm {
    font-family youSheBiaoTiHei
}
.set-size {
    font-size 38px !important
}
.set-size2 {
    font-size 32px !important
}
.set-size3 {
    font-size 28px !important
}
.set-size4 {
    font-size 26px !important
}
.set-size5 {
    display inline-block
    text-align center
    font-size 22px !important
    width 640px !important
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
}
</style>
